<template>
	<view class="dflex alc jcsb index pl40 pr46">
		<!-- 左边 -->
		<view class=" dflex alc ">
			<view class="img dflex alc jcc">
				<image src="../../../static/milkanmuxi.png" mode=""></image>
			</view>
			<view class="dflex flexc jcsb ml40">
				<view class="fs30 color fw900">{{ data.name }}</view>
				<view class="fs28 fw900 red mt8">￥{{ data.price }}</view>
			</view>
		</view>
		<!-- 右边 -->
		<view class="right dflex alc images jcse">
			<image src="../../images/sub.png" mode="widthFix" @click="prep(data)"></image>
			<input
				type="number"
				v-model="data.value"
				class="textc dflex jcc color ipt"
				@input="changeInput"
			/>
			<image src="../../images/add.png" mode="widthFix" @click="next(data)"></image>
		</view>
	</view>
</template>

<script>
export default {
	props: ['data'],
	data() {
		return {};
	},
	methods: {
		prep(data) {
			if (data.value < 1) {
				return;
			} else {
				data.value--;
			}
		},
		next(data) {
			data.value++;
		},
		changeInput(e) {
			if (!e.detail.value) {
				return uni.showToast({
					title: '申报数量不能为空',
					icon: 'none'
				});
			}
			if (e.detail.value < 0) {
				return uni.showToast({
					title: '请输入合法的数值',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
	width: 670rpx;
}
.img {
	width: 90rpx;
	height: 90rpx;
	background: #e6f4fc;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	image {
		width: 70rpx;
		height: 70rpx;
	}
}
.right {
	width: 200rpx;
	height: 60rpx;
	background: #f6f6f6;
	border-radius: 30rpx 30rpx 30rpx 30rpx;
	opacity: 1;
}
.images {
	image {
		width: 16rpx;
		height: 16rpx;
	}
}
.ipt {
	width: 60rpx;
}
</style>
